<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade"
    tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #onlinestoresForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="operationType=='add'">{{l("CreateNewonlinestore")}}</span>
                        <span *ngIf="operationType=='edit'">{{l("Editonlinestore")}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                      </button>
                </div>
                <div class="modal-body">
                    <tabset class="tab-container tabbable-line">
                        <tab heading="{{l('storeMessage')}}" customClass="kt-tabs__item">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label>{{l("ItemId")}}</label>
                                        <input #nameInput="ngModel" class="form-control" type="text" name="sku_ID"
                                            [(ngModel)]="onlineStore.sku_ID" maxlength="32">
                                        <validation-messages [formCtrl]="nameInput"></validation-messages>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{l("price")}}</label>
                                        <input #priceInput="ngModel" class="form-control" type="number" name="price"
                                            [(ngModel)]="onlineStore.price">
                                        <validation-messages [formCtrl]="priceInput"></validation-messages>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{l("onlinestoreId")}}</label>
                                        <input class="form-control" type="text" name="onlinestoreId" [(ngModel)]="onlineStore.storeId"
                                            maxlength="32">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{l("stock")}}</label>
                                        <input #quantityInput="ngModel" class="form-control" type="number"
                                            name="quantity" [(ngModel)]="onlineStore.inventory">
                                        <validation-messages [formCtrl]="quantityInput"></validation-messages>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{l("onlineMallId")}}</label>
                                        <input #onlineMallIdInput="ngModel" class="form-control" type="number" name="onlineStoreId"
                                            [(ngModel)]="onlineStore.onlineStoreId"  maxlength="32" placeholder="0098278">
                                        <validation-messages [formCtrl]="onlineMallIdInput"></validation-messages>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{l("QRCodeLink")}}*</label>
                                        <input #QRCodeLinkInput="ngModel" class="form-control" type="text"
                                            pattern="^(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$"
                                            name="QRCodeLink" [(ngModel)]="onlineStore.qrcode" maxlength="256" required>
                                        <validation-messages [formCtrl]="QRCodeLinkInput"></validation-messages>
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{l("onlineTrafficTarget")}}*</label>
                                        <input class="form-control" #llllll name="llllll" id="llllll" list="list"
                                            [(ngModel)]="onlineStore.onlineStoreName" required />
                                        <datalist id="list">
                                            <option value="Platform"></option>
                                            <option value="Taobao"></option>
                                            <option value="Oracle"></option>
                                            <option value="JD"></option>
                                            <option value="BaiSheng"></option>
                                            <option value="Shangpai"></option>
                                            <option value="Weimob"></option>
                                            <option value="WX-miniprogram"></option>
                                        </datalist>
                                        <!-- <select #onlineTrafficTargetInput="ngModel" required class="form-control " id="onlineTrafficTarget" name="onlineTrafficTarget"
                                            [(ngModel)]="onlineStore.onlineStoreName">
                                            <option value="Platform">官方电商</option>
                                            <option value="Taobao">淘宝分类</option>
                                            <option value="Oracle">Oracl类</option>
                                            <option value="JD">京东</option>
                                            <option value="BaiSheng">百盛ERP</option>
                                            <option value="Shangpai">商派ER</option>
                                        </select> -->
                                        <!-- <validation-messages [formCtrl]="onlineTrafficTargetInput"></validation-messages> -->
                                    </div>
                                </div>
                            </div>
                        </tab>
                    </tabset>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-primary" (click)="close()">{{l("Cancel")}}</button>
                    <button type="submit" *ngIf="editable" class="btn btn-primary blue" [disabled]="!onlinestoresForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i>
                        <span>{{l("Save")}}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>